<template>
    <div class="role-account" v-if="tableData.data.length > 0">
        <div class="grid-wrap">
            <el-table style="width:100%;"
                        row-key="id"
                        :data="tableData.data">
                <el-table-column type="index" width="64px" align="center" />
                <el-table-column label="账号名" prop="account" width="160px"></el-table-column>
                <el-table-column label="姓名" prop="name" width="120px"></el-table-column>
                <el-table-column label="手机号码" prop="mobile"></el-table-column>
                <el-table-column label="部门" prop="department_name"></el-table-column>
                <el-table-column label="创建时间" prop="department_name"></el-table-column>

            </el-table>
        </div>
        <div class="page-wrap">
                <el-pagination
                    v-model:current-page="params.current"
                    v-model:page-size="params.size"
                    :page-sizes="[100, 200, 300, 400]"
                    layout="total, prev, pager, next"
                    :total="params.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />

        </div>
    </div>
    <div class="no-data" v-else>
        <el-empty description="暂无数据">
        </el-empty>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch} from 'vue'
import { getUserListByRole } from 'services/setting'

const props = defineProps<{
    role_id: number | undefined,
   
}>();

const params = reactive({
    current:1,
    size:20,
    total:0
})

const tableData = reactive({
    data:[]
})

const handleSizeChange = (val: number) => {
    params.size = val
    params.current = 1
     if (props.role_id) {
        getData(props.role_id)
    }
}

const handleCurrentChange = (val:number) => {
    params.current = val
    if (props.role_id) {
        getData(props.role_id)
    }
} 

const getData = (role_id:number) => {
    getUserListByRole({
        role_id,
        current:params.current,
        size:params.size}).then((res:any) => {
            tableData.data = res.list || []
            params.total = res.total || 0
    })
}

watch(() => props.role_id, (val) => {
    if (val) {
        getData(val)
    }
},{
    immediate:true
})
</script>
<style lang="scss">
.role-account{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .grid-wrap{
        flex: 1;
        height: 0;
    }

    .page-wrap{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}
</style>